<template>
  <Card>
    <PagingTable ref="table" :columns="tableColumn" :dataUrl="dataUrl" :searchParams="tableSearchParams" @on-selection-change="handleSelectionChange"
                 :autoSearch="autoSearch">
      <div slot="search">
        <Form :label-width="100" :model="queryParams" :rules="ruleValidate" inline>
          <FormItem label="登陆账户" prop="account">
            <Input v-model="queryParams.account" style="width: 200px"/>
          </FormItem>
          <FormItem label="登陆状态" prop="deviceType">
            <Select v-model="queryParams.status" style="width: 200px" :clearable="true">
              <Option v-for="item in statusOptions" :value="item.value" :key="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem label="登陆时间">
            <DatePicker v-model="queryParams.createTime" type="date" format="yyyy-MM-dd" placeholder="请选择日期"
                        style="width: 200px" :clearable="true" :editable="false"></DatePicker>
          </FormItem>
          <FormItem>
            <Button type="primary" icon="ios-search" @click="doSearch">查询</Button>
          </FormItem>
        </Form>
      </div>

      <div slot="buttons">
        <Button type="warning" icon="md-close" @click="delLog">删除</Button>
        <Button type="warning" icon="ios-trash" @click="emptyLog">清空</Button>
      </div>
    </PagingTable>
  </Card>
</template>

<script>
  import PagingTable from "@/components/paging-table/index";
  import { toDateString } from '@/libs/tools'
  import { delOneLog, batchDelete, emptyLog } from '@/api/system/user'
  export default {
    name: "user-index",
    components: {
      PagingTable
    },
    data() {
      let re = /^[^`!@#$%^&*.<>]+$/;
      const validateInt = (rule, value, callback) => {
        if ((!re.test(value) && value)) {
          callback(new Error('不能输入特殊字符'));
        } else {
          callback();
        }
      };
      return {
        dataUrl: '',
        tableSearchParams: {},
        autoSearch: false,
        selections: [],
        queryParams: {
          account: undefined,
          createTime: undefined,
          status: undefined
        },
        statusOptions: [
          {label: '成功', value: 0},
          {label: '失败', value: 1},
        ],
        statusTextDict: {
          '0': '成功',
          '1': '失败'
        },
        ruleValidate: {
          account: [
            {validator: validateInt, trigger: 'blur'}
          ]
        },
      }
    },
    computed: {
      tableColumn() {
        let columns1 = [
          {
            type: "selection",
            maxWidth: 80,
            align: "center",
            fixed: "left"
          },
          {
            title: '登录IP',
            key: 'ip'
          },
          {
            title: '登录账户',
            key: 'account',
            sortable: "custom",
            sortField: "account",
          },
          {
            title: '登录描述',
            key: 'descript'
          },
          {
            title: '登陆状态',
            key: 'status',
            align: 'center',
            render: (h, params) => {
              if (params.row.status === '1') {
                return h('div', [
                  h(
                    "Tag",
                    {
                      props: {
                        color: "warning"
                      }
                    },
                    "失败"
                  )
                ]);
              } else if (params.row.status === '0') {
                return h('div', [
                  h(
                    "Tag",
                    {
                      props: {
                        color: "success"
                      }
                    },
                    "成功"
                  )
                ]);
              }
            }
          },
          {
            title: '登录时间',
            key: 'createTime',
            sortable: "custom",
            sortField: "create_time",
          },
          {
            title: '登录位置',
            key: 'location'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            minWidth: 50,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.delOneLog(params.row.logId);
                    }
                  }
                }, '删除'),
              ]);
            }
          },
        ]
        return columns1;
      }
    },
    methods: {
      // 在多选模式下有效, 只要选中项发生变化时就会触发, 返回值 selection: 已选项数据
      handleSelectionChange: function(selection) {
        this.selections = selection;
      },
      delLog() {
        console.log(this.selections);
        if (this.selections.length === 0) {
          this.$Message.error("请选择需要删除的日志信息！");
          return;
        }
        this.$Modal.confirm({
          title: '提示',
          content: '是否批量删除' + this.selections.length + '条登陆日志？',
          onOk: () => {
            let logIdArray = [];
            for (let item of this.selections) {
              logIdArray.push(item.logId);
            }
            batchDelete({logIds: logIdArray.join()}).then(res => {
              if (res.data.code === 0) {
                this.$Message.success(res.data.message);
                this.$refs.table.tableRefresh();
              }
            })
          }
        });
      },
      delOneLog(logId) {
        console.log("删除：" + logId);
        this.$Modal.confirm({
          title: '提示',
          content: '是否删除条登陆日志 ' + logId + ' ?',
          onOk: () => {
            delOneLog({logId: logId}).then(res => {
              if (res.data.code === 0) {
                this.$Message.success(res.data.message);
                this.$refs.table.tableRefresh();
              }
            });
          }
        });
      },
      emptyLog() {
        this.$Modal.confirm({
          title: '提示',
          content: '是否清空全部登陆日志？',
          onOk: () => {
            emptyLog().then(res => {
              if (res.data.code === 0) {
                this.$Message.success(res.data.message);
                this.$refs.table.tableRefresh();
              }
            });
          }
        });
      },
      doSearch() {
        this.dataUrl = '/system/loginlog/listForPagingTable';
        this.tableSearchParams = Object.assign({}, this.queryParams);
        this.tableSearchParams.createTime = toDateString(this.tableSearchParams.createTime, 'yyyy-MM-dd')
      }
    },
    mounted() {
      this.doSearch();
    },
  }
</script>

<style scoped>
  .button1 {
    margin-right: 10px;
  }
</style>
